<%--
  Created by IntelliJ IDEA.
  User: 彭辉明
  Date: 2024/6/6
  Time: 9:01
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<style>
    /* 基本样式重置 */
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        font-family: Arial, sans-serif;
        line-height: 1.6;
        background-color: #f4f4f4;
        color: #333;
    }

    /* 表格美化 */
    table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 20px;
    }

    table th,
    table td {
        padding: 15px;
        text-align: left;
        border-bottom: 1px solid #ddd;
    }

    table th {
        background-color: #5c6bc0;
        color: white;
    }

    /* 按钮样式 */
    #addOss {
        display: inline-block;
        padding: 10px 20px;
        margin-bottom: 20px;
        background-color: #2196F3;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    #addOss:hover {
        background-color: #1976D2;
    }

    /* 输入框样式 */
    input[type="radio"] {
        margin-right: 5px;
    }

    /* 页面标题 */
    h1 {
        text-align: center;
        padding: 20px 0;
        color: #3f51b5;
    }
</style>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <h1>存储空间列表</h1>
    <button id="addOss">创建存储空间</button>
    <div>
        <table>
            <tr>
                <th>存储空间名称</th>
                <th>存储类型</th>
                <th>容量</th>
                <th>流量</th>
                <th>当月访问次数</th>
                <th>访问权限管理</th>
            </tr>
            <tbody id="showOss">
            </tbody>
        </table>
    </div>
</body>
</html>
<script>
<%--    页面初始化--%>
    $(function (){
        onloadOk();
    })
    // 初始化方法
    function onloadOk(){
        $.ajax({
            url:'oss',
            type:'post',
            data:{opr:'selectAllOss'},
            dataType:'json',
            success:function (data){
                for(var i = 0; i < data.length; i++) {
                    var str = "<tr>";
                    str += "<td>" + data[i].bucketName + "</td>";
                    str += "<td>" + data[i].type + "</td>";
                    str += "<td>" + data[i].capacity + "</td>";
                    str += "<td>" + data[i].flow + "</td>";
                    str += "<td>" + data[i].visits + "</td>";
                    // 使用i作为name的一部分，确保每行的单选按钮是独立的
                    str += "<td>";
                    str += "<input type='radio' name='mission_" + i + "' value='RW' " + (data[i].permission === 'RW' ? "checked" : "") + ">RW ";
                    str += "<input type='radio' name='mission_" + i + "' value='R' " + (data[i].permission === 'R' ? "checked" : "") + ">R ";
                    str += "<input type='radio' name='mission_" + i + "' value='Pri' " + (data[i].permission === 'Pri' ? "checked" : "") + ">Pri";
                    str += "</td>";
                    str += "</tr>";
                    $("#showOss").append(str);
                }
            },
            error:function (){
                alert('请求失败');
            }
        });
    }
    //新增跳转页面
    $('#addOss').on('click',function (){
        window.location.href = 'AddOss.jsp'
    })
    //给每个数据中的一行添加点击事件
    $('body').on('click', 'input[type="radio"][name^="mission_"]', function() {
        alert($(this).val())
        var buttonValue = $(this).val();
        var bucketName = $(this).closest('tr').find('td:first').text();
        $.ajax({
            url: 'oss',
            type: 'POST',
            data: {
                opr:'updatePermission',
                bucketName: bucketName,
                permission: buttonValue
            },
            dataType: 'json',
            success: function(data) {
                if (data==true) {
                    alert('权限更新成功')
                    window.location.reload()
                } else {
                    alert('权限更新失败')
                    window.location.reload()
                }
            },
            error: function() {
                console.error('请求失败');
            }
        });
    });

    $('#addOss').on('click',function (){
        window.location.href = 'AddOss.jsp';
    });
</script>
